<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/ajax.js"></script>
		<script src="../js/class-administrator/delay.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		
		<style>
			body{
				padding: 20px;
				background-color: white;
				
			}
			
		</style>
	</head>
	<body>
		
		<!--修改的模态框开始-->
		<!-- Modal -->
		<div class="modal fade" id="updateDelayModal" tabindex="-1" delay="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" delay="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">迟到记录修改</h4>
		      </div>
		      <div class="modal-body">
				  
					<!-- 迟到记录的表单 开始 -->
					<form class="form-horizontal">
					  <div class="form-group">
					    <label for="updateDelayId" class="col-sm-2 control-label">#</label>
					    <div class="col-sm-10">
						  <p class="form-control-static" name="updateDelayId"></p>
						  <input type="hidden" name="updateDelayId" />
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="userName" class="col-sm-2 control-label">学生姓名</label>
					    <div class="col-sm-10">
					     <!-- <input type="text" class="form-control" id="userName" name="updateUserName" placeholder="学生姓名"> -->
						 
						 <select class="form-control" id="userNameToUpdate" name="updateUserName" >
						 	<option value="0">--学生姓名---</option>
						 	<option v-for="student in students" v-bind:value="student.userId">{{student.userName}}</option>
						 </select>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="delayDate" class="col-sm-2 control-label">迟到日期</label>
					    <div class="col-sm-10">
					      <input type="date" class="form-control" id="delayDate" name="updateDelayDate" placeholder="迟到日期">
					    </div>
					  </div>
					</form>
					<!-- 迟到记录新增的表单 结束 -->
		        
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" id="modalUpdateDelayButton" class="btn btn-primary">修改</button>
		      </div>
		    </div>
		  </div>
		</div>
		<!--修改的模态框结束-->
		
		<!-- 新增的模块框开始 -->
		<!-- Modal -->
		<div class="modal fade" id="addDelayModal" tabindex="-1" delay="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" delay="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">录入迟到数据</h4>
		      </div>
		      <div class="modal-body">
				  
					<!-- 迟到记录新增的表单 开始 -->
					<form class="form-horizontal">
					  <div class="form-group">
					    <label for="userName" class="col-sm-2 control-label">学生姓名</label>
					    <div class="col-sm-10">
					      <!-- <input type="text" class="form-control" id="userName" name="addUserName" placeholder="学生姓名"> -->
						  <select class="form-control" id="userNameToAdd" name="addUserName" >
							  <option value="0">--学生姓名---</option>
							  <option v-for="student in students" v-bind:value="student.userId">{{student.userName}}</option>
						  </select>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="delayDate" class="col-sm-2 control-label">迟到日期</label>
					    <div class="col-sm-10">
					      <input type="date" class="form-control" id="delayDate" name="addDelayDate" >
					    </div>
					  </div>
					</form>
					<!-- 迟到记录新增的表单 结束 -->
		        
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" id="saveDelayButton" class="btn btn-primary">保存</button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- 新增的模态框结束 -->
		
		
		<div class="container">
			
			<!-- 路径导航开始-->
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb">
					  <li><a style="text-decoration: none;" href="#">考勤管理</a></li>
					  <li><a style="text-decoration: none;" href="#">录入迟到数据</a></li>
					</ol>
				</div>
			</div>
			<!-- 路径导航结束-->
			
			<!-- 按钮开始-->
			<div class="row">
				<div class="col-md-4">
					<button id="addDelayButton" class="btn btn-primary">增加</button>
					<button id="deleteDelayButton" class="btn btn-danger">删除</button>
				</div>
			</div>
			<!-- 按钮结束-->
			
			<!-- 表格开始-->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="delayListTable">
						<tr>
							<th><input id="selectAllDelay" type="checkbox"></th>
							<!-- <th>#</th> -->
							<th>学生姓名</th>
							<th>迟到日期</th>
							<th>操作</th>
						</tr>
						<tr v-for="delay,index in delays">
							<td><input class="check-delay" type="checkbox" v-bind:value="delay.id"></td>
							<!-- <td>{{delay.id}}</td> -->
							<td>{{delay.userName}}</td>
							<td>{{delay.delayDate}}</td>
							<td>
								<button @click="tableUpdateDelayButton(index)" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
								</button>
								<!-- <button class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
								</button> -->
							</td>
						</tr>
						
						<!--分页组件开始-->
						<tr style="background-color: white;">
							<td colspan="2">
								<span class="glyphicon glyphicon-flag"></span>
								第
								<span class="pageNumber">{{pageNumber}}</span>
								页 
								&nbsp;
								<span class="glyphicon glyphicon-align-justify"></span>
								每页
								<span class="totalPage">{{pageSize}}</span>
								条
								&nbsp; 
								<span class="glyphicon glyphicon-check"></span>
								总记录
								<span class="totalCounter">{{totalCounter}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-briefcase"></span>
								共
								<span class="totalPage">{{totalPage}}</span>
								页
							</td>
							<td colspan="4">
								<!-- 分页按钮开始 -->
								<nav aria-label="Page navigation">
								  <ul class="pagination">
									
									<!-- 第1页 -->
									<li id="firstPage"><a href="#">首页</a></li>  
									
									<!-- 上1页 -->
								    <li id="prePage"><a href="#">&lt;</a></li>
									
									<!-- 下1页 -->
								    <li id="nextPage"><a href="#">&gt;</a></li>
									
									<!-- 最后1页 -->
									<li id="lastPage"><a href="#">末页</a></li> 
								  </ul>
								</nav>
								<!-- 分页按钮开始 -->
							</td>
						</tr>
						<!--分页组件结束-->
						
					</table>
				</div>
			</div>
			<!-- 表格结束-->
		</div>
<!-- 登陆失败提示框 开始 -->
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 600px;height: 251px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="errorModalLabel">
					<span class="glyphicon glyphicon-remove"></span>
                    输入错误
                </h4>
            </div>
            <div class="modal-body">
                <!-- 表单开始 -->
                <form class="form-horizontal">
                    <div class="form-group">
						<p>&nbsp;</p>
						<p style="text-align: center;" class="form-control-static">
							<span class="glyphicon glyphicon-hand-right"></span> &nbsp;	
							请输入正确的数据
						</p>
                    </div>
                </form>
                <!-- 表单结束-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 登陆失败提示框 结束 -->
	</body>
</html>
